<template>
  <!-- 最外层容器 -->
  <div class="loginContainer">
    <div class="isShowLogin">
         <!-- 顶部搜索 -->
    <div class="searchContainer">
      <!-- 左侧二维码 -->
      <i class="ri-qr-code-line"></i>
      <!-- 搜索框 -->
      <div class="searchInput">
        <div class="search-line"><i class="ri-search-line"></i></div>
        <input type="text" placeholder="搜索知乎内容" @focus="tosearch" />
      </div>
      <!-- 切换夜间模式 -->
      <i class="ri-moon-line"></i>
      <!-- 设置 -->
      <i @click="toSet" class="ri-settings-3-line"></i>
    </div>
    <!-- 登录方式 -->
    <div class="loginTip" v-if="!userInfo.nickName">
      <div class="text" @click="toLogin">登录知乎,体验更多功能</div>
      <!-- 小图标 -->
      <div class="tipImg">
        <i class="ri-smartphone-line" @click="toLogin"></i>
        <i class="ri-weibo-fill"></i>
        <i class="ri-wechat-fill"></i>
        <i class="ri-qq-line"></i>
      </div>
      <!-- 其他方式登录 -->
      <div class="otherLogin">
        其他方式登录<i class="ri-arrow-right-s-line"></i>
      </div>
       <!-- 数字 -->
      <div class="count">
        <i>0</i>
        <i>{{userInfo.nickName?"1":"0"}}</i>
        <i>0</i>
      </div>
      <!-- 推荐 -->
      <div class="recommend">
        <span>关注</span>
        <span @click="toCollect">收藏</span>
        <span>最近浏览</span>
      </div>
    </div>
    <!-- 登录之后显示用户的头像和名字 -->
    <div class="userInfo" v-else>
      <!-- 用户信息 -->
      <div class="user">
        <!-- 左侧 -->
        <div class="left">
          <img src='@/assets/images/用户头像.jpg'>
        </div>
        <!-- 中间 -->
        <span class="isLogin" >{{userInfo.nickName?userInfo.nickName:'用户未登录'}}</span>
        <!-- 右侧 -->
        <div class="right">
          <span>个人主页<i class="ri-arrow-right-s-line"></i></span>
        </div>
      </div>
       <!-- 数字 -->
      <div class="count">
        <i>12</i>
        <i @click="toCollect">{{info.length}}</i>
        <i>21</i>
      </div>
      <div class="recommend">
        <span>关注</span>
        <span>收藏</span>
        <span>最近浏览</span>
      </div>
    </div>
    <!-- vip -->
    <div class="vipcontainer">
      <!-- vip -->
      <div class="vBox">
        <div class="v-left">
          <span>开通盐选会员</span>
          <span>畅享10W+ 优质内容</span>
        </div>
        <div class="v-right">
          <div class="v-money">首月仅¥9</div>
        </div>
      </div>
    </div>
    <!-- help图标 -->
    <div class="help">
      <div class="helpItem">
        <span class="icon"><i class="ri-wallet-3-line"></i></span>
        <span class="desc">钱包</span>
      </div>
      <div class="helpItem">
        <span class="icon"><i class="ri-community-line"></i></span>
        <span class="desc">社区共建</span>
      </div>
      <div class="helpItem">
        <span class="icon"><i class="ri-hand-heart-line"></i></span>
        <span class="desc">反馈与帮助</span>
      </div>
      <div class="helpItem">
        <span class="icon"><i class="ri-thumb-up-line"></i></span>
        <span class="desc">进站必看</span>
      </div>
    </div>
    <!-- 卡片 -->
    <Card></Card>
      <Video/>
    <Card></Card>
    <!-- 视频滑块 -->
    <Video/>
    </div>
  </div>
</template>

<script>
// 引入卡片组件
import Card from './card/index'
// 引入视频滑块组件
import Video from './video'
// 引入store
import {mapState} from 'vuex'
export default {
  name: "Login",
  data(){
    return{
      info:[]
    }
  },
  // 注册组件
  components:{
    Card,
    Video,
  },
  methods:{
    // 点击登录实现路由跳转
    toLogin(){
      this.$router.push('/login/tologin')
    },
    // 切换组件
    toSet(){
     this.$router.push('/login/toSet')
    },
    // 点击跳转到搜索页面
    tosearch(){
      this.$router.push('/home/sousuo')
    },
    // 点击收藏
    toCollect(){
      if(!this.userInfo.nickName){
        this.$message({
          showClose: true,
          message: '亲,查看收藏先去登录哦!',
          type: 'error'
        });
        return
      }
      this.$router.push('/login/tocollect')
    },
    // 获取本地存储的收藏
    setInfo(){
      this.info=JSON.parse(localStorage.getItem('infoList'))
    }
    
  },
  mounted(){
    // 从本地缓存和路由跳转获取用户信息
   let userInfo=localStorage.getItem('user')||this.$route.query.user
  //  如果有保存到store中
   if(userInfo){
     let user=JSON.parse(userInfo)
    // 用户信息保存到仓库
     this.$store.dispatch('setUserInfo',user)
   }
   this.setInfo()
  },
  computed:{
    ...mapState(['userInfo'])
  }
};
</script>

<style lang='less' scoped>
// 最外层容器
.loginContainer {
  //按一倍图适配
  max-width: 375px;
  height:100%;
  width: 375px;
  // 顶部搜索
  .searchContainer {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    display: flex;
    height: 30px;
    line-height: 30px;
    vertical-align: bottom;
    text-align: center;
    font-size: 16px;
    align-items: center;
    justify-content: space-evenly;
    position: relative;
    margin-top:15px ;
    // 搜索框中所有的icon
    i {
      font-size: 25px;
      vertical-align: middle;
      color: #cdcdcd;
    }
    //  搜索框
    .searchInput {
      position: relative;
      .search-line {
        position: absolute;
        top: 0;
        left: -6px;
        bottom: 0;
        margin: 0 10px;
        color: #f3f3f3;
        .ri-search-line{
          color: #f3f3f3;
        }
      }
      input {
        border-radius: 30px;
        padding: 2px 0 2px 30px;
        background:#fbfbfb;
        border: none;
      }
    }
  }
  // 登录提示
  .loginTip {
    background: #fff;
    width: 100%;
    height: 130px;
    // background: chocolate;
    // margin:20px 0 0 20px ;
    margin-top: 20px;
    margin-bottom: 90px;
    // 文字
    .text {
      font-size: 16px;
      width: 100%;
      height: 30px;
      // background: blue;
      text-align: center;
      line-height: 30px;
      font-weight: bold;
    }
    // 图标
    .tipImg {
      margin-top: 20px;
      width: 100%;
      height: 45px;
      text-align: center;
      line-height: 45px;
      // background: chartreuse;
      font-size: 40px;
      color: #fff;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      .ri-smartphone-line {
        width: 45px;
        height: 45px;
        background: rgb(82, 171, 255);
        border-radius: 50%;
      }
      .ri-weibo-fill {
        width: 45px;
        height: 45px;
        background: #ffbc63;
        border-radius: 50%;
      }
      .ri-wechat-fill {
        width: 45px;
        height: 45px;
        background: #89d358;
        border-radius: 50%;
      }
      .ri-qq-line {
        width: 45px;
        height: 45px;
        background: #4ec7ff;
        border-radius: 50%;
      }
    }
    // 其他方式登录
    .otherLogin {
      width: 100%;
      height: 20px;
      // background: sandybrown;
      margin-top: 20px;
      text-align: center;
      font-size: 18px;
      color: #8691a6;
      i {
        vertical-align: bottom;
        color: #666;
      }
    }
    // 数字
    .count {
      width: 100%;
      height: 30px;
      margin-top:20px ;
      // background: #ffbc63;
      display: flex;
      justify-content: space-around;
      font-size: 26px;
      font-weight: bold;
    }
     // 推荐
    .recommend {
      margin-left: 15px;
      height: 20px;
      // background: #fff;
      display: flex;
      text-align: center;
      justify-content: space-evenly;
      span:nth-child(2) {
        text-align: center;
        width: 120px;
        height: 20px;
        // background: #8691a6;
        border-left: 1px solid rgb(138, 128, 128);
        border-right: 1px solid rgb(138, 128, 128);
      }
    }
  }
  // 用户信息
  .userInfo{
    background: #fff;
    width: 100%;
    height: 10px;
    // background: chocolate;
    margin-top: 20px;
    margin-bottom: 120px;
    // 用户信息
    .user{
      width: 330px;
      height: 50px;
      line-height: 50px;
      // background: turquoise;
      display: flex;
      justify-content: space-between;
      margin-left: 20px;
      text-align: center;
      position: relative;
      .left{
        display: flex;
        flex-direction: column;
        .isLogin{
          height: 20px;
        }
        .heart-pulse{
          font-size: 12px;
        }
        img{
          margin-left: 20px;
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }
      }
      .isLogin{
        position: absolute;
        left: 80px;
      }
      .right{
        font-size: 12px;
        color: #555555;
      }
    }
    // 数字
    .count {
      width: 100%;
      height: 30px;
      margin-top:20px ;
      // background: #ffbc63;
      display: flex;
      justify-content: space-around;
      font-size: 16px;
      // font-weight: bold;
    }
    // 推荐
    .recommend {
     margin-left:15px ;
      height: 20px;
      font-size: 14px;
      // background: #fff;
      display: flex;
      text-align: center;
      justify-content: space-evenly;
      // margin-left:10px ;
      span:nth-child(2) {
        text-align: center;
        width: 120px;
        height: 20px;
        // background: #8691a6;
        border-left: 1px solid rgb(138, 128, 128);
        border-right: 1px solid rgb(138, 128, 128);
      }
    }
  }
  // 推荐开通会员
  .vipcontainer {
    background: #fff;
    width: 340px;
    height: 80px;
    margin:20px ;
    // vip
    .vBox {
      width: 100%;
      height: 90px;
      border-radius: 30px;
      background: #fbead8;
      display: flex;
      justify-content: space-evenly;
      // margin-top: 80px;
      // vip左侧
      .v-left {
        width: 150px;
        height: 54px;
        // background: chocolate;
        // float: left;
        span:nth-child(1) {
          display: block;
          font-size: 20px;
          color: #7e5725;
          margin: 10px 0;
          text-align: center;
        }
        span:nth-child(2) {
          display: block;
          font-size: 16px;
          color: #ce984f;
          margin: 20px 0;
        }
      }
      // vip右侧
      .v-right {
        width: 150px;
        height: 54px;
        // background: chocolate;
        // float:right;
        .v-money {
          width: 100px;
          height: 50px;
          background: #f4ca8e;
          top: 0;
          bottom: 0;
          margin: 20px auto;
          left: 0;
          right: 0;
          text-align: center;
          line-height: 50px;
          border-radius: 30px;
          font-weight: bold;
          color: #78511d;
        }
      }
    }
  }
  // help图标
  .help {
    width: 340px;
    height: 80px;
    background: #f6f6f6;
    border-radius: 20px;
    margin: 10px 0 0 20px;
    // background: chartreuse;
    display: flex;
    justify-content: space-evenly;
    .helpItem{
      height: 80px;
      width: 80px;
      // background: chocolate;
      span{
        display: block;
        text-align: center;
        line-height:40px ;
        color: #424242;
        &.icon{
          font-size: 40px;
        }
        &.desc{
          font-weight: 520;
        }
      }
    }
  }
  
}
</style>
